<template>
  <div>
    <div class="button-style1">
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="exportPDF"
        >导出</el-button
      >
    </div>
    <!-- <button type="primary" @click="exportPDF">导出PDF</button> -->
    <div id="pdfHtml" ref="printHtml">
      <div class="collect">
        <div class="last">
          <div>
            收银员：<span v-if="querySummaryByClassNo[0]">{{
              querySummaryByClassNo[0].createName
            }}</span>
          </div>
          <div>
            班结时间：
            <span v-if="querySummaryByClassNo[0]"
              >{{ querySummaryByClassNo[0].classStartTime }}-</span
            >
            <span v-if="querySummaryByClassNo[0]">{{
              querySummaryByClassNo[0].classEndTime
            }}</span>
          </div>
        </div>

        <div class="last">
          <el-tooltip placement="top">
            <div
              v-if="querySummaryByClassNo[0] && querySummaryByClassNo[0].note"
              style="max-width: 80vw"
              v-html="ToBreak(querySummaryByClassNo[0].note)"
              slot="content"
            ></div>
            <div class="oneLine">
              备注：<span v-if="querySummaryByClassNo[0]">{{
                querySummaryByClassNo[0].note
              }}</span>
            </div>
          </el-tooltip>
        </div>
        <div class="item">
          <div class="title">班结对账汇总</div>
          <div class="table">
            <el-table
              :show-header="false"
              :data="table1"
              border
              style="width: 100%; height: 100%"
              :cell-class-name="addclass"
            >
              <el-table-column prop="title1" label="数值 2">
                <template slot-scope="scope">
                  <div style="width: 100%; height: 100%">
                    {{ scope.row.title1 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount1" label="数值 3"> </el-table-column>
              <el-table-column prop="title2" label="数值 2"> </el-table-column>
              <el-table-column prop="amount2" label="数值 3"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="item">
          <div class="title">消费-油品汇总</div>
          <div class="table">
            <el-table
              :data="queryGroupByOil"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="oil_name" label="油品名">
              </el-table-column>
              <el-table-column prop="oil_price" label="油价-原价(元)">
              </el-table-column>
              <el-table-column prop="order_liters" label="加油数量(L/kg)">
              </el-table-column>
              <el-table-column prop="receivable_amt" label="应收(元)">
              </el-table-column>
              <el-table-column prop="amt" label="实收(元)"> </el-table-column>
              <el-table-column prop="discount_amt" label="立减优惠合计(元)">
              </el-table-column>
              <el-table-column
                prop="discount_coupon_amt"
                label="优惠券优惠合计(元)"
              >
              </el-table-column>

              <!--<el-table-column prop="serviceCharge" label="手续费"> </el-table-column>-->
              <!-- <el-table-column prop="equipment_code" label="班结设备"> -->
              <!-- </el-table-column> -->
              <el-table-column prop="order_count" label="笔数">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="item">
          <div class="title">消费-油枪汇总</div>
          <div class="table">
            <el-table
              :data="queryGroupByOilGun"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="oil_gun" label="油枪"> </el-table-column>
              <el-table-column prop="oil_name" label="油品名">
              </el-table-column>
              <el-table-column prop="oil_price" label="油价-单价(元)">
              </el-table-column>
              <el-table-column prop="startFlowMeter" label="开始泵码" />
              <el-table-column prop="endFlowMeter" label="结束泵码" />
              <el-table-column prop="order_liters" label="数量(L/kg)">
              </el-table-column>
              <!-- <el-table-column prop="amt" label="应收(元)"> </el-table-column> -->
            </el-table>
          </div>
        </div>

        <!-- <div class="item">
          <div class="title">消费-油机汇总</div>
          <div class="table">
            <el-table
              :data="classSettlementOilmachines"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="oil_gun" label="油枪"> </el-table-column>
              <el-table-column prop="oil_name" label="油品名">
              </el-table-column>
              <el-table-column prop="oil_price" label="油价-单价">
              </el-table-column>
              <el-table-column prop="order_liters" label="加油数量(L/kg)">
              </el-table-column>
              <el-table-column prop="receivable_amt" label="应收(元)">
              </el-table-column>
              <el-table-column prop="amt" label="实收(元)"> </el-table-column>
              <el-table-column
                prop="discount_coupon_amt"
                label="立减优惠合计(元)"
              >
              </el-table-column>
              <el-table-column prop="discount_amt" label="优惠券优惠合计(元)">
              </el-table-column>
            </el-table>
          </div>
        </div> -->

        <div class="item">
          <div class="title">消费-支付方式汇总</div>
          <div class="table">
            <el-table
              :data="queryGroupByPayType"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column
                prop="pay_type"
                label="支付方式"
                :formatter="formatterPayType"
              >
              </el-table-column>
              <el-table-column prop="amt" label="消费合计(元)">
              </el-table-column>
              <el-table-column prop="refund_amt" label="退款合计(元)">
              </el-table-column>
              <el-table-column prop="discount_amt" label="立减优惠合计(元)">
              </el-table-column>
              <el-table-column
                prop="discount_coupon_amt"
                label="优惠券优惠合计(元)"
              >
              </el-table-column>
              <!--<el-table-column prop="serviceCharge" label="手续费"> </el-table-column>-->
              <!-- <el-table-column prop="sumPrice" label="加总合计"> </el-table-column> -->
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">消费-员工方式汇总</div>
          <div class="table">
            <el-table
              :data="queryGroupByEmployees"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="oil_personnel_name" label="账号">
              </el-table-column>
              <!-- <el-table-column prop="oil_name" label="油品"> </el-table-column> -->
              <el-table-column prop="receivable_amt" label="应收(元)">
              </el-table-column>
              <el-table-column prop="amt" label="实收(元)"> </el-table-column>

              <el-table-column prop="discount_amt" label="立减优惠合计(元)">
              </el-table-column>
              <el-table-column
                prop="discount_coupon_amt"
                label="优惠券优惠合计(元)"
              >
              </el-table-column>
              <el-table-column prop="refund_amt" label="退款(元)">
              </el-table-column>
              <el-table-column prop="order_count" label="笔数">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">充值-员工方式汇总</div>
          <div class="table">
            <el-table
              :data="changeClassSettlement4User"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="oilPersonnelName" label="账号">
                <template slot-scope="scope">
                  {{
                    scope.row.oilPersonnelId
                      ? scope.row.oilPersonnelName
                      : "其他"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="amt" label="应收(元)"> </el-table-column>
              <el-table-column prop="amt" label="实收(元)"> </el-table-column>
              <el-table-column label="优惠(元)">0 </el-table-column>
              <el-table-column prop="orderCount" label="笔数">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!--
  <div class="item">
      <div class="title">消费-活动优惠汇总</div>
      <div class="table">
        <el-table :data="queryGroupByActivity" border style="width: 100%; height: 100%">
        <el-table-column prop="class_no" label="班结号"> </el-table-column>

          <el-table-column prop="q1" label="活动名称"> </el-table-column>

          <el-table-column prop="order_count" label="订单数量"> </el-table-column>
          <el-table-column prop="discount_amt" label="优惠金额"> </el-table-column>
        </el-table>
      </div>
    </div>
    -->

        <div class="item">
          <div class="title">充值-汇总</div>
          <div class="table">
            <el-table :data="cardSum" border style="width: 100%; height: 100%">
              <el-table-column
                prop="payType"
                label="充值类型"
                :formatter="formatterCardSumPaytype"
              >
              </el-table-column>
              <el-table-column prop="amt" label="实收(元)"> </el-table-column>
              <el-table-column prop="giveAmt" label="赠送(元)">
              </el-table-column>
              <el-table-column prop="orderCount" label="笔数">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">会员卡-交易汇总</div>
          <div class="table">
            <el-table :data="dzkSum" border style="width: 100%; height: 100%">
              <el-table-column
                prop="payType"
                :formatter="formatterDzkPayType"
                label="消费类型"
              >
              </el-table-column>
              <el-table-column prop="amt" label="实收(元)"> </el-table-column>
              <el-table-column prop="giveAmt" label="优惠(元)">
              </el-table-column>
              <el-table-column prop="orderCount" label="笔数">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">退款-汇总</div>
          <div class="table">
            <el-table
              :data="refundSum"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column
                prop="payType"
                label="退款类型"
                :formatter="formatterRefundPay"
              >
              </el-table-column>
              <el-table-column prop="refundAmt" label="金额(元)">
              </el-table-column>
              <el-table-column prop="orderCount" label="笔数">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 通道费 -->
        <p
          v-show="
            querySummaryByClassNo[0] &&
            querySummaryByClassNo[0].isShowCommission === 1
          "
        >
          通道费:银行卡通道费合计
          {{
            querySummaryByClassNo[0]
              ? querySummaryByClassNo[0].yhkCommission
              : 0
          }}
          元,扫码支付通道费合计
          {{
            querySummaryByClassNo[0]
              ? querySummaryByClassNo[0].otherCommission
              : 0
          }}
          元,总通道费合计
          {{
            querySummaryByClassNo[0]
              ? querySummaryByClassNo[0].allCommission
              : 0
          }}
          元
        </p>

        <!--
    <div class="item">
      <div class="title">收款分类汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="收款方式"> </el-table-column>
          <el-table-column prop="q2" label="实收合计"> </el-table-column>
          <el-table-column prop="q3" label="退款合计"> </el-table-column>
          <el-table-column prop="q4" label="优惠合计"> </el-table-column>
          <el-table-column prop="q5" label="加总合计"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">积分商城收款分类汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="收款方式"> </el-table-column>
          <el-table-column prop="q2" label="实收合计"> </el-table-column>
          <el-table-column prop="q3" label="优惠合计"> </el-table-column>
          <el-table-column prop="q4" label="使用积分"> </el-table-column>
          <el-table-column prop="q5" label="订单合计"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">自定义金额充值</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="微信"> </el-table-column>
          <el-table-column prop="q2" label="支付宝"> </el-table-column>
          <el-table-column prop="q3" label="现金"> </el-table-column>
          <el-table-column prop="q4" label="使用积分"> </el-table-column>
          <el-table-column prop="q5" label="银行卡额"> </el-table-column>
        </el-table>
      </div>
    </div>
    -->
      </div>
    </div>
  </div>
</template>

<script>
import { getSettlementInfo } from "@/api/settlement";
import { getPdf } from "@/api/exportPdf";
import { getStationList } from "@/api/dept";
export default {
  data() {
    return {
      changeClassSettlement4User: [], //充值-支付方式汇总
      querySummaryByClassNo: [],
      queryGroupByActivity: [],
      queryGroupByOil: [],
      // classSettlementOilmachines: [], //消费-油机汇总
      queryGroupByOilGun: [],
      queryGroupByPayType: [],
      queryGroupByEmployees: [],
      // classSettlementOilmachines: [], // 油枪汇总
      cardSum: [],
      dzkSum: [],
      refundSum: [],

      table1: [
        // {
        //     title1: "消费合计应收（不含充值）：",
        //     amount1: "",
        //     title2: "短款：",
        //     amount2: "",
        //   },
        //   {
        //     title1: "消费合计实收（不含充值）：",
        //     amount1: "",
        //     title2: "优惠券合计金额：",
        //     amount2: "",
        //   },
        //   {
        //     title1: "充值实收合计金额：",
        //     amount1: "",
        //     title2: "立减合计金额：",
        //     amount2: "",
        //   },
        //   {
        //     title1: "客户退款合计金额：",
        //     amount1: "",
        //     title2: "回罐合计金额：",
        //     amount2: "",
        //   }
        // {
        //   title1: "消费合计应收(元):",
        //   amount1: "",
        //   title2: "消费合计实收(元):",
        //   amount2: "",
        // },
        // {
        //   title1: "消费合计优惠(元):",
        //   amount1: "",
        //   title2: "消费赠送总金额(元):",
        //   amount2: "",
        // },
        // {
        //   title1: "充值合计实收(元):",
        //   amount1: "",
        //   title2: "充值合计提现(元):",
        //   amount2: "",
        // },
        // {
        //   title1: "充值合计赠送(元):",
        //   amount1: "",
        //   title2: "充值合计退款(元):",
        //   amount2: "",
        // },
        // {
        //   title1: "到账总金额(元):",
        //   amount1: "",
        //   title2: "提现总金额(元):",
        //   amount2: "",
        // },
        // {
        //   title1: "优惠券核销金额(元):",
        //   amount1: ""
        // }
        {
          title1: "消费合计应收(元):",
          amount1: "",
          title2: "消费合计实收(元):",
          amount2: "",
        },
        {
          title1: "消费合计优惠(元):",
          amount1: "",
          title2: "消费赠送总金额(元):",
          amount2: "",
        },
        {
          title1: "消费合计退款(元):",
          amount1: "",
          title2: "优惠券核销金额(元):",
          amount2: "",
        },
        {
          title1: "充值合计实收(元):",
          amount1: "",
          title2: "充值立减优惠(元):",
          amount2: "",
        },
        {
          title1: "充值合计赠送(元):",
          amount1: "",
          title2: "充值合计退款(元):",
          amount2: "",
        },
        {
          title1: "秒杀订单金额(元):",
          amount1: "",
          title2: "聚合支付消费合计(元):",
          amount2: "",
        },
        {
          title1: "到账总金额(元):",
          amount1: "",
        },
      ],

      table2: [
        {
          q1: "11",
          q2: "12",
          q3: "13",
          q4: "14",
          q5: "15",
        },
      ],
      isOnlyOneStation: false, // 当前油企是否只有一个油站
    };
  },
  created() {
    this.getStationList();
    getSettlementInfo({
      classNo: this.$route.query.classNo,
    }).then((res) => {
      this.querySummaryByClassNo = res.data.querySummaryByClassNo;
      this.queryGroupByActivity = res.data.queryGroupByActivity;
      this.queryGroupByOil = res.data.queryGroupByOil;
      // this.classSettlementOilmachines = res.data.data.classSettlementOilmachines // 消费-油机汇总
      this.queryGroupByOilGun = res.data.queryGroupByOilGun;
      this.queryGroupByPayType = res.data.queryGroupByPayType;
      this.classSettlementOilmachines = res.data.classSettlementOilmachines; // 油枪汇总
      this.queryGroupByEmployees = res.data.listDetail4User;
      this.changeClassSettlement4User = res.data.changeClassSettlement4User; //充值-员工方式汇总
      this.dzkSum = res.data.queryGroupByRecharge; // 电子卡-交易汇总
      this.cardSum = res.data.transactionSummary; // 充值-汇总
      this.refundSum = res.data.refundSummary; // 退款-汇总

      // table1
      // this.table1[0].amount2 = this.querySummaryByClassNo[0].moreAmt || 0 // 短款
      // this.table1[4].amount1 = this.querySummaryByClassNo[0].score || 0 // 消耗积分
      // this.table1[0].amount1 = this.querySummaryByClassNo[0].receivableAmt || 0; // 消费合计应收
      // this.table1[0].amount2 = this.querySummaryByClassNo[0].amt || 0; // 消费合计实收
      // this.table1[1].amount1 =
      //   this.querySummaryByClassNo[0].totalDiscountAmt || 0; // 消费合计优惠
      // this.table1[1].amount2 =
      //   this.querySummaryByClassNo[0].consumptionRefundAmt || 0; // 消费合计退款
      // this.table1[2].amount1 =
      //   this.querySummaryByClassNo[0].actualRechargeReceivedAmt || 0; // 充值实收合计金额
      // this.table1[2].amount2 =
      //   this.querySummaryByClassNo[0].totalRechargeWithdrawalAmount || 0; // 充值合计提现
      // this.table1[3].amount1 =
      //   this.querySummaryByClassNo[0].actualRechargeGiftAmt || 0; // 充值赠送合计金额
      // this.table1[3].amount2 =
      //   this.querySummaryByClassNo[0].totalRechargeRefundAmt || 0; // 充值合计退款
      // this.table1[4].amount1 = this.querySummaryByClassNo[0].allAmt || 0; // 到账总金额
      // this.table1[4].amount2 =
      //   this.querySummaryByClassNo[0].totalWithdrawalAmount || 0; // 提现总金额
      //   this.table1[5].amount1 = this.querySummaryByClassNo[0].killCouponAmt || 0 // 核销核销金额

      this.table1[0].amount1 = this.querySummaryByClassNo[0].receivableAmt || 0; // 消费合计应收
      this.table1[0].amount2 = this.querySummaryByClassNo[0].amt || 0; // 消费合计应收
      this.table1[1].amount1 =
        this.querySummaryByClassNo[0].totalDiscountAmt || 0; // 消费合计优惠
      // this.table1[1].amount2 = this.querySummaryByClassNo[0].consumptionRefundAmt; // 消费合计退款
      this.table1[1].amount2 = this.querySummaryByClassNo[0].presentAmount || 0; // 消费赠送总金额
      this.table1[2].amount1 =
        this.querySummaryByClassNo[0].consumptionRefundAmt || 0; // 消费合计退款
      // this.table1[2].amount1 =
      //   this.querySummaryByClassNo[0].actualRechargeReceivedAmt || 0; // 充值实收合计
      this.table1[2].amount2 = this.querySummaryByClassNo[0].killCouponAmt || 0; //  核销核销金额
      // this.table1[2].amount2 =
      //   this.querySummaryByClassNo[0].totalRechargeWithdrawalAmount; // 充值合计提现
      this.table1[3].amount1 =
        this.querySummaryByClassNo[0].actualRechargeReceivedAmt || 0; // 充值合计实收
      // this.table1[3].amount1 = this.querySummaryByClassNo[0].totalPresentAmt || 0; // 充值合计赠送
      this.table1[3].amount2 =
        this.querySummaryByClassNo[0].rechargeReduceDiscounts || 0; // 充值立减优惠
      // this.table1[3].amount2 =
      //   this.querySummaryByClassNo[0].totalRechargeRefundAmt; // 充值合计退款
      this.table1[4].amount1 =
        this.querySummaryByClassNo[0].actualRechargeGiftAmt || 0; // 充值合计赠送
      // this.table1[4].amount1 =
      //   this.querySummaryByClassNo[0].totalPresentAmt || 0; // 充值合计赠送
      // this.table1[4].amount1 = this.querySummaryByClassNo[0].allAmt; // 到账总金额
      this.table1[4].amount2 =
        this.querySummaryByClassNo[0].totalRechargeRefundAmt || 0; // 充值合计退款
      // this.table1[4].amount2 =
      //   this.querySummaryByClassNo[0].totalWithdrawalAmount || 0; // 提现总金额
      this.table1[5].amount1 =
        this.querySummaryByClassNo[0].saleActivityAmt || 0; // 秒杀订单
      this.table1[5].amount2 =
        this.querySummaryByClassNo[0].aggregatedPayment || 0; // 聚合支付
      // this.table1[5].amount1 = this.querySummaryByClassNo[0].killCouponAmt || 0 // 核销核销金额
      this.table1[6].amount1 =
        this.querySummaryByClassNo[0].totalWithdrawalAmount || 0; // 到账总金额

      // 支付方式汇总
      // const sumPayType = {};
      // sumPayType.pay_type = "合计";
      // // sumPayType.pay_type = res.data.querySummaryByClassNo.receivableAmt;
      // sumPayType.amt = res.data.querySummaryByClassNo[0].amt;
      // sumPayType.refund_amt = res.data.querySummaryByClassNo[0].refundAmt;
      // sumPayType.discount_amt = res.data.querySummaryByClassNo[0].discountAmt;
      // sumPayType.serviceCharge =
      //   res.data.querySummaryByClassNo[0].serviceCharge;
      // sumPayType.serviceCharge =
      //   res.data.querySummaryByClassNo[0].serviceCharge;
      // sumPayType.sumPrice = res.data.querySummaryByClassNo[0].sumPrice;
      // sumPayType.discount_coupon_amt =
      //   res.data.querySummaryByClassNo[0].discountCouponAmt;
      // // console.log(sumPayType);

      // this.queryGroupByPayType.push(sumPayType);

      // console.log('queryGroupByPayType',this.queryGroupByPayType)
      // console.log('querySummaryByClassNo',this.querySummaryByClassNo)
    });
  },

  methods: {
    ToBreak(val) {
      return val.replaceAll(",", "<br />");
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    exportPDF() {
      getPdf("班次信息", "pdfHtml");
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    addclass(row) {
      if (row.columnIndex % 2 === 0) return "cellcss";
    },
    // 判断是油企，油站，admin
    authFn(authArr) {
      let data = {
        pageSize: 100,
        pageNum: 1,
      };
      if (authArr.length > 0) {
        if (authArr.length >= 1 && authArr.includes("1")) {
          data.enterpriseId = this.presentEnterprise.enterpriseId;
          return data;
        } else if (authArr.length >= 1 && authArr.includes("2")) {
          data.stationId = this.presentSation;
          return data;
        }
      } else {
        return data;
      }
    },
    // 获取油站列表。 判断单站还是有多个站
    getStationList() {
      let data = this.authFn(this.$store.state.user.roles);
      // status 油站的状态 : 1 正常, 0 停用
      data = {
        ...data,
        status: 1,
      };
      getStationList(data).then((res) => {
        if (res.rows.length <= 1) {
          this.isOnlyOneStation = true;
        }
      });
    },

    // 格式化支付类型
    formatterPayType(row, column) {
      const types = {
        wx: "微信支付",
        zfb: "支付宝",
        xj: "现金支付",
        dzk: "电子卡支付",
        pos: "POS机支付",
        yzf: "预支付",
        kbzf: "卡包支付",
        yhk: "银行卡支付",
        cdk: "车队卡支付",
        dkq: "实体卡支付",
      };
      if (types[row.pay_type] !== "合计" && !types[row.pay_type]) {
        return row.pay_type;
      } else {
        return row.pay_type !== "合计" ? types[row.pay_type] ?? "" : "合计";
      }
    },

    formatterDzkPayType(row, column) {
      const type = {
        // imp: "手动增加",
        msub: "手动扣减",
        // wx: "微信充值",
        // ref: "充值退款",
        dkq: "实体卡支付",
        dzk: "会员卡支付",
      };
      return type[row.payType] ? type[row.payType] : "电子卡支付";
    },

    // 充值类型
    formatterCardSumPaytype(row) {
      const types = {
        pos: "会员卡-移动支付充值",
        imp: "会员卡-充值手动增加",
        wx: "会员卡-微信充值",
        cjhysd: "超级会员-手动添加",
        cjhyxs: "超级会员-线上添加",
        cdk: "车队卡-后台充值",
        dkqxj: "实体卡-后台充值",
        dkqwxpos: "实体卡-移动支付充值",
      };
      return row.payType !== "合计" ? types[row.payType] ?? "" : "合计";
    },

    // 退款类型
    formatterRefundPay(row) {
      const types = {
        wx: "微信支付-消费退款",
        zfb: "支付宝支付-消费退款",
        pos: "POS机支付-消费退款",
        ref: "会员卡支付-充值退款",
        dzk: "会员卡支付-消费退款",
        cdk: "车队卡支付-消费退款",
        dkq: "实体卡支付-消费退款",
        xj: "现金支付-消费退款",
        sref: "超级会员-退款",
        dkqwxposref: "实体卡-移动支付充值退款",
        msref: "秒杀退款",
        yhk: "银行卡-退款"
      };
      return row.payType !== "合计" ? types[row.payType] ?? "" : "合计";
    },
  },
};
</script>
<style lang="scss">
::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;

  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}

.collect {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;

  .item {
    margin-top: 10px;

    .title {
      text-align: center;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .cellcss {
    background-color: #f6f6f6;
  }

  .last {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
}

.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.button-style1 {
  padding: 0 20px;
  margin-top: 12px;
  margin-bottom: 10px;
}
</style>
